<template>
  <div class="box">
    <aside-box>
      <template #zh> 饼图 </template>
      <template #en> pie chart </template>
      <div class="pie" ref="pieRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

const data = ref([
  { value: 435, name: "公安局" },
  { value: 679, name: "民政局" },
  { value: 848, name: "气象局" },
  { value: 348, name: "统计局" },
  { value: 679, name: "交通局" },
  { value: 848, name: "人社局" },
  { value: 1348, name: "其他" },
]);

// 自定义tooltip
function tooltipBox(params) {
  return `
  <div class="custom-tooltip">
    <div>
    ${params.marker} ${params.seriesName}
    </div>
    ${params.name}: ${params.value}(${params.percent})%
  </div>
`;
}

const option = {
  tooltip: {
    trigger: "item",
    // formatter: "{a} <br/>{b} : {c} ({d}%)", // 指定tooltip渲染的内容
    backgroundColor: "rgba(0, 0, 0, 0.5)", // 修改tooltip背景颜色
    // borderColor: "#fff", // 修改tooltip背景边框颜色
    // 修改tooltip内部文字颜色
    // textStyle: {
    //   fontSize: 14,
    //   color: "#fff",
    // },
    // 通过模板字符串自定义tooltip结构内容
    formatter: (params) => {
      return tooltipBox(params);
    },
  },
  // color: [
  //   "#8fc31f",
  //   "#f35833",
  //   "#00ccff",
  //   "#ffcc00",
  //   "#f5e965",
  //   "#a74faf",
  //   "#ff9668",
  // ],

  series: [
    {
      name: "资源总量构成",
      type: "pie",
      radius: "55%",
      center: ["50%", "50%"],
      data: data.value,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
        normal: {
          label: {
            show: true,
            //	                            position:'inside',
            formatter: "{b} : {c} ({d}%)",
            fontSize: 12, //文字的字体大小
            color: "auto", // 跟随图形颜色设置auto, 不跟随自定义
          },
        },
        labelLine: { show: true },
      },
    },
  ],
};
onMounted(() => {
  data.value = [
    { value: 435, name: "公安局" },
    { value: 679, name: "民政局" },
    { value: 848, name: "气象局" },
    { value: 348, name: "统计局" },
    { value: 679, name: "交通局" },
    { value: 848, name: "人社局" },
    { value: 1348, name: "其他" },
  ];
  option.series[0].data = data.value;

});

// 实例化echarts
const [pieRef, myChart] = useEcharts(option, data.value);
console.log("myChart", myChart);

onMounted(() => {
  myChart.value?.on("click", (params) => {
    console.log("====", params);
  });
});
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .pie {
    width: 100%;
    height: 200px;
  }
}

:deep(.custom-tooltip) {
  color: #fff !important;
}
</style>